<template>
  <div class="natal-chart__center">
    <van-row justify="space-between">
      <van-col class="person-property" span="24">
        {{ wuxingGame.name }}
      </van-col>
      <van-col class="natal-chart-item" span="24">
        姓名：{{ name }}
      </van-col>
      <van-col class="natal-chart-item" span="24">
        <div class="flex-between">
          <span> 阳历：{{ solar }} </span>
          <span>{{ lunarInfo.gzYear }}</span>
        </div>
      </van-col>
      <van-col class="natal-chart-item" span="24">
        <div class="flex-between">
          <span>阴历：{{ lunar }}</span>
          <span>{{ shichen + '时'}}</span>
        </div>
      </van-col>
    </van-row>
<!--    <div class="pay-box">-->
<!--      <div class="pay-btn" @click="handlePay">-->
<!--        <div class="pay-icon"><img :src="icon3" alt=""></div>-->
<!--        <div class="pay-title">心愿祈祷</div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
  import {isWeixnApp} from '@/utils';
export default {
  inheritAttrs: false
}
</script>
<script setup>
import { computed, ref } from 'vue';
import icon3 from '@/assets/icon3.png';
const props = defineProps({
  name: String,
  lunarDate: String,
  numTime: String,
  lunarInfo: Object,
  wuxingGame: Object,
  shichen: String,
})

const lunar = computed(()=>{
  const { lYear, IMonthCn, IDayCn } = props.lunarInfo
  return `${lYear}年${IMonthCn}${IDayCn}`
})

const solar = computed(()=>{
  const { cYear, cMonth, cDay } = props.lunarInfo
  return `${cYear}年${cMonth}月${cDay}`
})

  const handlePay = () => {
    if (isWeixnApp()) {
      window.wx.miniProgram.navigateTo({
        url: '/pages/index/pay',
      })
    }
  }

</script>

<style>
  .natal-chart__center {
    background-color: #fff;
    grid-area: center;
    padding: 1rem;
    position: relative;
  }
  .person-property {
    text-align: center;
    font-family: Source Han Serif CN;
    font-size: 1.53rem;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 0em;
    color: #A2936E;
    height: 3rem;
  }
  .natal-chart-item{
    height: 2rem;
    font-size: 0.9rem;
  }
  .flex-between {
    display: flex;
    justify-content: space-between;
  }
  .van-col {
    margin-bottom: .2rem;
  }
  .pay-box {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }
  .pay-box .pay-btn {
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 6px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px #ccc;
    border: 1px solid #A2936E;
  }

  .pay-btn .pay-title {
    font-size: 18px;
    font-weight: 600;
    color: #A2936E;
  }

  .pay-btn .pay-icon {
    width: 40px;
    height: 40px;
  }

  .pay-btn .pay-icon img {
    width: 100%;
    height: 100%;
  }
</style>
